<template>
  <div class="container">
    <div class="container-header">
      <div class="title">推荐民宿</div>
      <ul>
        <li ref="li" @mouseenter="enterLi(index)" v-for="(item, index) of cityList" :key="index">
          <span :class="{active: item.hover}"></span>
          {{item.city}}
        </li>
      </ul>
      <span class="all">全部<i class="iconfont">&#xe633;</i></span>
    </div>
    <div class="container-content">
      <ul>
        <li v-for="(item, index) of list" :key="index">
          <img class="img-one" :src="item.picture">
          <img class="img-two" src="https://p0.meituan.net/mmc/35ad1f9253761ea6ff822b5e659f234f3758.png">
          <div class="product">
            <p class="product-title">{{item.title}}</p>
            <p class="product-desc">
              <span>{{item.descHouse}}</span>
              <span>
                {{item.peopleCount}}
              </span>
              <span class="line">|</span>
              <span>{{item.place}}</span>
            </p>
            <p class="product-price">
              <span class="symbol">￥</span>
              <span>{{item.price}}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeStay',
  data() {
    return {
      list: []
    }
  },
  props: {
    cityList: {
      type: Array,
      default() {
        return []
      }
    },
    homeStay: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    /** 鼠标移入列表的时候控制一个class */
    enterLi(index) {
      this.cityList.forEach((item, indexs) => {
        if (index === indexs) item['hover'] = true
        else item['hover'] = false
      })
      this.list = this.homeStay[index].informationList
    }
  },
  watch: {
    homeStay(newVal) {
      this.list = newVal[0].informationList
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 1199px;
  padding-right: 7px;
  margin: 0 auto;
  margin-top: 30px;
  &-header {
    width: 100%;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background: linear-gradient(to right, rgb(243, 182, 74) 2%, rgb(242, 197, 69) 97%) rgb(243, 182, 74);
    .title {
      font-size: 18px;
      margin-left: 13px;
      margin-right: 10px;
      float: left;
      padding: 0 5px;
      position: relative;
      cursor: pointer;
      text-transform: uppercase;
    }
    .all {
      float: right;
      margin-right: 12px;
      .iconfont {
        font-size: 13px;
        color: #fff;
      }
    }
    ul {
      li {
        display: inline-block;
        font-size: 15px;
        float: left;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
        text-transform: uppercase;
        .active::after {
          position: absolute;
          border-top: 6px solid transparent;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-bottom: 8px solid #fff;
          content: "";
          width: 11px;
          bottom: 0;
          right: 10px;
          height: 0;
        }
      }
    }
  }
  &-content {
    width: 100%;
    padding: 20px;
    padding-right: 0;
    padding-bottom: 0;
    border: 1px solid #E5E5E5;
    border-top: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #fff;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-right: 18px;
        position: relative;
        display: flex;
        flex-direction: column;
        .img-one {
          width: 370px;
          height: 208px;
          border-radius: 4px;
          margin-bottom: 11px;
          cursor: pointer;
        }
        .img-two {
          border: 2px solid #FFFFFF;
          height: 45px;
          width: 48px;
          position: absolute;
          bottom: 110px;
          right: 26px;
          z-index: 9;
          border-radius: 40px;
        }
        .product {
          text-align: left;
          padding-bottom: 25px;
          &-title {
            font-size: 16px;
            color: #222222;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 7px 0;
            font-weight: 400;
            width: 297px;
          }
          &-desc {
            font-size: 12px;
            color: #999999;
            text-align: left;
            display: flex;
            align-items: center;
            .line {
              margin: 0 3px;
              display: flex;
              align-items: center;
            }
          }
          &-price {
            font-weight: 500;
            font-size: 22px;
            color: #FF6600;
            letter-spacing: -0.8px;
            padding: 4px 0;
            .symbol {
              font-size: 17px;
            }
          }
        }
      }
    }
  }
}
</style> 